<script setup lang="ts">
</script>
<template>
  <div id="login">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="auto"
      class="demo-ruleForm login-box">
      <div class="top" style="text-align: center; margin-bottom: '30px'">
        <img class="img" src="../../assets/img/login-logo.png" alt="" />
      </div>

      <el-form-item prop="user" class="ite">
        <el-input v-model="ruleForm.user" class="inp" placeholder="请输入账号"/>
      </el-form-item>
      <el-form-item prop="pass">
        <el-input v-model="ruleForm.pass" type="password" autocomplete="off" class="inp" placeholder="请输入密码"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)" class="btn">登录</el-button>
      </el-form-item>
    </el-form>
    <div>
      <Yzm :ruleForm="ruleForm" :obj="obj" @mounted="mounted" :yzm="yzmflag" @eventI="back"></Yzm>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getID } from "./getId";
// import axios from '../../utils/axios'
import request from "../../utils/request";
import { reactive, ref,onMounted } from 'vue'
import type { FormInstance } from 'element-plus'
import Yzm from './yzm.vue'

const ruleFormRef = ref<FormInstance>()

const checkUser = (rule: any, value: any, callback: any) => {
  if (value === '') {
    return callback(new Error('账号不能为空'))
  }

  callback()
}
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空'))
  } else {
    callback()
  }
}
const ruleForm = reactive({
  pass: '',
  user: ''
})

const rules = reactive({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  user: [{ validator: checkUser, trigger: 'blur' }]
})
let yzmflag = ref(false)
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      //  开关
      yzmflag.value = true
    } else {
      return false
    }
  })
}
const back = async () => {
  yzmflag.value = false
}


const uid=ref()
const obj:any =reactive(
  {
    token:"",
    jigsawImageBase64:"",
    originalImageBase64:"",
    secretKey:"",
  }
)
const mounted=async()=>{
  uid.value =getID()
   let tokenres:any=await request.post("/captcha/get",{ 
        captchaType: "blockPuzzle",
        clientUid: uid.value,
        ts: new Date().getTime()
      }
      )
 if(tokenres.data.repCode=="0000"){
     obj.jigsawImageBase64= "data:image/png;base64," + tokenres.data.repData.jigsawImageBase64
     obj.token= tokenres.data.repData.token
     obj.originalImageBase64= "data:image/png;base64," + tokenres.data.repData.originalImageBase64
     obj.secretKey=tokenres.data.repData.secretKey
 }
}
mounted()
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scoped>
#login {
  width: 100%;
  height: 100%;
  position: fixed;
  background: url('../../assets/img/login-bg.png') no-repeat;
  background-size: cover;
}

.login-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 100%;
  padding-top: 10%;
}

.ite {
  width: 100%;
  background: red;
  margin: 30px 0;
}

.img {
  width: 205px;
  height: 63px;
  vertical-align: middle;
  max-width: 100%;
}

.btn {
  width: 100%;
  margin-top: 30px;
}
</style>